<template>
  <div class="wx" ref='wx' @click="changeWx">
      <div class="wx-container">
          <img class="phone" src="/imgs/pay/icon-scan.png">
          <div class="code">
              <div class="h3 flex-space-bet">
                  <h3>微信支付</h3>
                  <span class="iconfont" @click='changeWx'>&#xe66c;</span>
              </div>
              <div class="code-img">
                  <img src="/imgs/pay/icon-qrcode.png" alt="">
              </div>
              <p>请使用<span class='red'>微信</span>扫一扫</p>
              <p>二维码完成支付</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'Wx',
    data(){
        return{
            vwWidth: document.body.clientWidth,
            vwHeight: document.body.clientHeight,
        }
    },
    methods: {
        setWH(){
            this.vwWidth = document.body.offsetWidth || document.documentElement.offsetWidth;
            this.vwHeight = document.body.offsetHeight || document.documentElement.offsetHeight;
            let wx = this.$refs.wx;
            wx.style.width = this.vwWidth + 'px';
            wx.style.height = this.vwHeight + 'px';
            // this.$refs.wx.style = "width:" + this.vwWidth + 'px;' + "height: " + this.vwHeight + 'px' 
            // console.log(this.vwWidth, this.vwHeight)
        },
        changeWx(){
            this.$emit('changeWx')
        }
    },
    mounted(){
        this.setWH()
        // window.onresize = this.setWH;
        window.addEventListener('resize',this.setWH)
    },
    destroyed(){
        window.removeEventListener("resize",this.setWH)
    }
    
}
</script>

<style lang="scss">
.wx{
    background: rgba(51, 51, 51, 0.514);
    position: fixed;
    top: 0;
    left: 0;
    transition: 1s;
    min-width: 1226px;
    .wx-container{
        position:absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%,-50%);
        display:flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 22px;
        .code{
            background: #fff;
            width: 370px;
            height: 440px;
            .h3{
                height: 60px;
                line-height: 60px;
                padding: 0 20px;
                background: #eee;
                .iconfont{
                    cursor: pointer;
                }
            }
            .code-img>img{
                width: 237px;
                margin-top: 40px;
                margin-bottom: 10px;
            }
        }
    }
    .phone{
        width: 297px;
    }
}
</style>